    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>百度钱包正反牌匾-兔子代替</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                height: 200px;
                width: 200px;
                /*border: 1px solid #000;*/
                margin: 100px auto;
                position: relative;
                transition: all 2s;
            }
            div::before,div::after{
                position: absolute;
                left: 0;
                top: 0;
                content: '';
                /*display: block;*/
                height: 200px;
                width: 200px;
                border: 1px solid #000;
                border-radius: 50%;
                background: #0AB6C3;
                transition: all 2s;
                /*transform-origin: ;*/
                backface-visibility:hidden;
            }
            div::after{
                /*left: 350px;*/
                content: "4";
                background: url("img/rabbit1.jpg") no-repeat -150px -80px;
            }
            div::before{
                /*left: 350px;*/
                content: "2";
                background: url("img/rabbit2.jpg") no-repeat -90px -60px;
                transform: rotateY(180deg);
            }
          body:hover div::after{
                transform: rotateY(-180deg);

              /*backface-visibility:hidden;*/
            }
            body:hover div::before{
                transform: rotateY(0deg);

            }
        </style>
    </head>
    <body>
<!--        //利用兔子的照片可以旋转，两面都能看到-->
            <div class="box1"></div>
    </body>
    </html>